<!--本文件由FirstUI授权予关赛川（手机号： 1 5  60  05 1  520 5，身份证尾号：22 6  5 1 9）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
	<view class="foodDetailsList">

		<view class="foodContent marin25">
			<view class="food-litm">
				<view class="food-top">
					<image :src="baseOssUrl2 + form.headPhoto" mode="aspectFill" class="fd-img"></image>
					<view class="item-right">
						<view class="title-cont">
							{{form.title}}<!-- （{{form.address}}） -->
						</view>
						<view class="rate-cont">
							<view class="">
								<fui-rate :score=rateNum size='30' disabled></fui-rate>
								<text class="rate-text">{{rateNum?rateNum:" "}}</text>
								<text class="price-pop">¥{{form.pjxf}}/人</text>
							</view>
							<view class="pj-volume" @click="userClick">
								<text>评价</text>
								<image class="rightJt" :src="baseOssUrl +'icon/rightJt.png' " mode=""></image>
							</view>
						</view>
						<view class="addres-cont">
							<view class="addr-left">
								<text class="name1">营业时间: {{form.yysj || '9:00-19:00'}}</text>
							</view>

						</view>
					</view>
				</view>
				<view class="food-bottom">
					<view class="itemb-left">
						<image class="ad-img" :src="baseOssUrl +'icon/address.png' " mode=""></image><text class="add-left">{{form.address}}</text>
					</view>
					<view class="itemb-right">
						<image @click.stop="address()" class="ad-img" :src=" baseOssUrl +'icon/go-address.png'" mode=""></image>
						<image @click="phone()" class="ad-img1" :src="baseOssUrl +'icon/pone.png' " mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 优惠套餐 -->
		<view class="foodPackTitle marin25">
			优惠套餐
		</view>
		<view class="foodPackage marin25">
			<view class="foodpack-litm">
				<view class="foodpack-top" v-for="(item,index) in form.cateringList" :key="index" @click="packgeDetails(item)">
					<image :src="baseOssUrl2 + item.images[0]" mode="" class="fd-img"></image>
					<view class="itempack-right">
						<view class="title-cont">
							{{item.title}}
						</view>
						<view class="ratepack-cont">
							<text class="volume">周一至周日·免预约</text>
						</view>
						<view class="addres-cont">
							<view class="addr-left">
								<text class="jia-ge">¥{{item.dj}}</text>
								<!-- <text class="zhe-kou">5.9折</text> -->
								<text class="yuan-jia">¥{{item.zj}}</text>
							</view>
							<view class="addr-right">
								抢购
							</view>
						</view>
					</view>
				</view>
				<view class="foodpack-litm" v-if="form.cateringList.length == 0">
					暂无优惠套餐
				</view>
			</view>
		</view>
		<!-- 评分 -->

		<view class="netFriend marin25" @click="userClick">
			<view class="net-text">
				<text class="ntext">评分</text>
				<text class="ntext1">更多评价</text>
			</view>

			<view class="net-content">
				<view class="content-head marin25">
					<view class="head-left">
						<!-- 超棒 -->
						<view class="leftpf">
							{{dfzhs.zf || 0}}
						</view>
					</view>
					<view class="head-right">

						<view class="right1" v-for="(item,index) in ringList" :key='index'>
							<circle-progress-bar :pro="item.isPfeng" :start="0" size='100' border_width='5' border_color='#35743D'
							 border_back_color='#DDD' background='#EFEFEF' :animate='true'>

							</circle-progress-bar>
							{{item.name}}
							<text class="right-ring">{{item.ringPf}}</text>
						</view>
					</view>
				</view>
				<view class="content-comment marin25"  v-if="plLists.length != 0">
					<view class="" v-for=" (item,index) in plLists" :key="index">
						<view class="persdata">
							<view class="persdata-left">
								<image style="border-radius: 50%;" :src="baseOssUrl2 + item.tx " mode=""></image>
								<view class="pdata-center">
									{{item.username}}
									<view class="pdata-time">{{item.cjTime}}发表</view>
								</view>
							</view>
							<view class="persdata-right">
								<fui-rate :score=item.xj size='30' disabled></fui-rate>
							</view>
						</view>
						<view class="persdat-details">
							{{item.text}}
						</view>
						<view class="rating-imgs" v-if="item.images.length != 0">
							<image :src="baseOssUrl2 + item1" mode="" v-for="(item1,index1) in item.images" :key='index1'  @click="showGallery(item.images,index1)"></image>
							<fui-gallery :urls="ratingImgs" :show="bigImgshow" @hide="hideGallery"></fui-gallery>
						</view>
					</view>
					<!-- <view class="consumed">
						已消费：超级特惠双人餐username 名
tx 头像
cjTime 评论时间
text 内容 
xj 打分星级
images 多图

					</view> -->
					<view class="persdat-all">
						全部{{pltotal}}条评价 >
					</view>
				</view>
				<view class="content-comment marin25"  v-if="plLists.length == 0">
					<view class="persdat-all">
						暂无评价
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		baseOssUrl,
		baseOssUrl2
	} from '@/common/settings';
	import circleProgressBar from '@/components/component/circle-progress-bar'
	export default {
		//登录状态
		computed: mapState(['isLogin']),
		data() {
			return {
				plLists:{}, //评价列表
				pltotal:'',
				dfzhs:{},
				id:'',
				form:'', // 详情
				baseOssUrl: baseOssUrl,
				baseOssUrl2: baseOssUrl2,
				rateNum: '', //评分
				ringList: [{
						name: '位置',
						ringPf: '0',
						isPfeng: 0
					},
					{
						name: '设施',
						ringPf: '0',
						isPfeng: 0
					},
					{
						name: '服务',
						ringPf: '0',
						isPfeng: 0
					},
					{
						name: '卫生',
						ringPf: '0',
						isPfeng: 0
					},
				],
			}
		},
		onLoad(e) {
			console.log(e.id)
			// if (!this.isLogin) {
			// 	uni.navigateTo({
			// 		url: '../login/index'
			// 	})
			// }
			this.id = e.id
			this.getDetails()
			this.dfzh()
			this.plList()
		},
		components: {
			circleProgressBar
		},
		methods: {
			...mapMutations(['login', 'logout']),
			// 获取详情	
			getDetails() {
				this.$http.get(this.$httpApi.cyDetail, {
					data: {
						 id: this.id
					}
				}).then(res => {
					if (res.code == 0) {
						this.form = res.data
						
						this.form.cateringList.forEach(item=>{
							var arr = [];
							arr  = item.images.split(',')
							console.log(arr)
							item.images = arr
						})
					}
				})
			},
			// 评分
			dfzh() {
				this.$http.get(this.$httpApi.dfzh, {
					data: {
						 mId: this.id
					}
				}).then(res => {
					if (res.code == 0) {
						this.dfzhs = res.data
						this.rateNum = parseFloat(res.data.zf).toFixed(1)
						this.dfzhs.zf = parseFloat(res.data.zf).toFixed(2)
						this.ringList[0].ringPf = parseFloat(res.data.wzdfSum).toFixed(2)
						this.ringList[1].ringPf = parseFloat(res.data.ssdfSum).toFixed(2)
						this.ringList[2].ringPf = parseFloat(res.data.fwdfSum).toFixed(2)
						this.ringList[3].ringPf = parseFloat(res.data.wsdfSum).toFixed(2)
						this.ringList[0].isPfeng = parseFloat(res.data.wzdfSum/5).toFixed(2)
						this.ringList[1].isPfeng = parseFloat(res.data.ssdfSum/5).toFixed(2)
						this.ringList[2].isPfeng = parseFloat(res.data.fwdfSum/5).toFixed(2)
						this.ringList[3].isPfeng = parseFloat(res.data.wsdfSum/5).toFixed(2)
					}
				})
			},
			// 评价列表
			plList() {
				this.$http.get(this.$httpApi.plList, {
					data: {
						 mId: this.id,
						 page:1,
						 limit: 5
					}
				}).then(res => {
					if (res.code == 0) {
						this.plLists = res.page
						this.plLists.forEach(item=>{
							if(item.images) {
								console.log(item,'itemitemitem')
								var arr = [];
								arr  = item.images.split(',')
								console.log(arr)
								item.images = arr
							}
							
						})
						this.pltotal = res.total
					}
					// if (res.code == 0) {
					// 	this.plLists = res.page[0]
					// 	var arr = [];
					// 	arr  = res.page[0].images.split(',')
					// 	this.plLists.images = arr
					// 	console.log(this.plLists.image)
					// 	this.pltotal = res.total
					// }
				})
			},
			// 去这里
			address() {
				console.log('进入导航')
				//  经纬度暂时写死，后面介入数据
				let latitude =  Number(this.form.latitude);
				let longitude = Number(this.form.longitude);
				let address=this.form.address
				// 获取定位信息
				uni.getLocation({
					type: 'wgs84', //返回可以用于uni.openLocation的经纬度
					// 用户允许获取定位
					success: function(res) {
						console.log(res, '经纬度===>')
						if (res.errMsg == "getLocation:ok") {
							console.log(latitude)
							console.log(longitude)
							uni.openLocation({
								// 传入你要去的纬度
								latitude: latitude,
								// 传入你要去的经度
								longitude: longitude,
								// 传入你要去的地址信息 不填则为空
								address: address,
								// 缩放大小
								scale: 18,
								success: function() {
									console.log('成功的回调success');
								}
							});
						}
					},
					// 用户拒绝获取定位后 再次点击触发
					fail: function(res) {
						console.log(res)
						if (res.errMsg == "getLocation:fail auth deny") {
							uni.showModal({
								content: '检测到您没打开获取信息功能权限，是否去设置打开？',
								confirmText: "确认",
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (res) => {
												console.log('确定');
											}
										})
									} else {
										console.log('取消');
										return false;
									}
								}
							})
						}
					}
				});
			},
			// 拨打电话
			phone() {
				uni.makePhoneCall({
					phoneNumber: this.form.phone
				});
			},
			// 去套餐详情
			packgeDetails(e){
				uni.navigateTo({
					url: `/pages/fpackageDetails/index?id=${e.id}&mid=${this.id}`  
				})
			},
			// 用户评价
			userClick() {
				uni.navigateTo({
					url: "/pages/userrating/index?id=" + this.id
				})
			},
			// 评分
			rateChange(e) {
				//返回评分 e.score
				console.log(e)
				this.rateNum = e.score
			},
			goSearch(e) {
				console.log('eee', e)
				// 	uni.navigateTo({
				// 		url: "/pages/searchList/index?num=2"
				// 	})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.foodDetailsList {
		height: 100%;

		.searchHeader {
			background: #FFFFFF;
		}

		.searchTab {
			background: #FFFFFF;
		}

		.foodContent {
			margin-top: 26rpx;

			.food-litm {
				background-color: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				padding: 24rpx;

				.food-top {
					display: flex;
					padding-bottom: 10rpx;
					border-bottom: 1px solid #D9D9D9;

					.fd-img {
						width: 170rpx;
						height: 170rpx;
					}

					.item-right {
						width: 75%;
						margin-left: 24rpx;
						line-height: 40rpx;

						.title-cont {
							font-size: 30rpx;
							font-weight: bold;
						}

						.rate-cont {
							color: #969696;
							font-size: 24rpx;
							display: flex;
							justify-content: space-between;

							.pj-volume {
								.rightJt {
									width: 10rpx;
									height: 20rpx;
									margin-left: 10rpx;
								}

								display: flex;
								align-items: center;
							}

							.rate-text {
								color: #EDBD0B;
								margin: 0 16rpx;
							}
						}

						.addres-cont {
							display: flex;
							justify-content: space-between;
							font-size: 24rpx;
							color: #969696;

							.addr-left {
								.name1 {
									margin-right: 20rpx;
								}
							}

							.addr-right {
								display: flex;
								align-items: center;

								.ad-img {
									width: 20rpx;
									height: 25rpx;
								}
							}
						}
					}
				}

				.food-bottom {
					margin-top: 25rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.itemb-left {
						display: flex;
						align-items: center;

						.ad-img {
							width: 20rpx;
							height: 25rpx;
							margin-right: 12rpx;
						}

						.add-left {
							font-size: 24rpx;
							color: #969696;
						}
					}

					.itemb-right {
						.ad-img {
							width: 37rpx;
							height: 37rpx;
							margin-right: 20rpx;
						}

						.ad-img1 {
							width: 37rpx;
							height: 37rpx;
						}
					}
				}


			}
		}

		// 优惠套餐 
		.foodPackTitle {
			font-size: 32rpx;
			font-weight: bold;
		}

		.foodPackage {
			margin-top: 26rpx;

			.foodpack-litm {
				background-color: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				padding: 24rpx 24rpx 10rpx;

				.foodpack-top {
					display: flex;

					padding-bottom: 10rpx;
					border-bottom: 1px solid #D9D9D9;
					margin-bottom: 10rpx;

					&:last-child {
						border-bottom: none;
					}

					.fd-img {
						width: 170rpx;
						height: 170rpx;
					}

					.itempack-right {
						width: 75%;
						margin-left: 24rpx;
						line-height: 50rpx;

						.title-cont {
							font-size: 28rpx;
							font-weight: bold;
						}

						.ratepack-cont {
							color: #969696;
							font-size: 24rpx;
							display: flex;
							justify-content: space-between;
						}

						.addres-cont {
							display: flex;
							justify-content: space-between;
							font-size: 24rpx;
							color: #969696;

							.addr-left {
								.jia-ge {
									color: #D93C3C;
									font-size: 30rpx;
									margin-right: 18rpx;
								}

								.zhe-kou {
									padding: 5rpx;
									color: #35743D;
									border: 1px solid #35743D;
								}

								.yuan-jia {
									font-size: 26rpx;
									margin-left: 5rpx;
								}
							}

							.addr-right {
								color: #FFFFFF;
								padding: 10rpx 30rpx;
								background-color: #35743D;
								border-radius: 30rpx;
							}
						}
					}
				}
			}

		}


		.netFriend {
			padding-bottom: 30rpx;

			.net-text {
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
				color: #1D1D1D;
				margin: 40rpx 0 16rpx 0;
				font-weight: bold;
			
				.ntext1 {
					font-size: 26rpx;
				}
			}

			.net-content {
				background: #FFFFFF;
				padding-top: 32rpx;
				border-radius: 16rpx;
				padding-bottom: 20rpx;

				.content-head {
					background-color: #EFEFEF;
					height: 160rpx;
					border-radius: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #35743D;

					.head-left {
						border-right: 1px solid #B4B4B4;
						width: 20%;
						text-align: center;
						font-size: 24rpx;

						.leftpf {
							font-size: 38rpx;
							font-weight: bold;
						}
					}

					.head-right {
						width: 80%;
						height: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						color: #35743D;
						font-size: 24rpx;
						margin-left: 40rpx;

						.right1 {
							text-align: center;
							position: relative;
							margin-right: 20rpx;
							.right-ring {
								text-align: center;
								position: absolute;
								right:0rpx;
								top: 38rpx;
								font-size: 28rpx;
								width: 100%;
								
							}


						}
					}
				}

				.content-comment {
					.persdata {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: 60rpx 0 20rpx 0;  
						.persdata-left{
							display: flex; 
							image {
								width: 100rpx;
								height: 100rpx;
								margin-right: 16rpx;
							}
							
							.pdata-center {
								color: #1D1D1D;
							
								.pdata-time {
									color: #969696;
								}
							
							}
						}
					}

					.persdat-details {
						margin: 20rpx 0 40rpx 0;
						font-size: 28rpx;
						color: #1D1D1D;
					}

					.consumed {
						color: #7E7E7D;
						margin-bottom: 20rpx;
						font-size: 26rpx;
					}

					.persdat-all {
						margin-top: 20rpx;
						text-align: center;
						color: #1D1D1D;
						font-size: 26rpx;
						padding: 10rpx 0;
					}
				}
			}
		}
	}
	.rating-imgs {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		image {
			width: 202rpx;
			height: 200rpx;
			margin-right: 12rpx;
			margin-bottom: 12rpx;
		}
	}
</style>
